<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>院系管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    
  </head>
  
  <body>
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="#">学校信息管理</a>
        <a>
          <cite>院系管理</cite></a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <div class="x-body" id="app">
      <xblock>
        <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
		<button class="layui-btn" onclick="open_addOrg()" ><i class="layui-icon"></i>增加</button>
        <span class="x-right" style="line-height:40px">共有数据：{{ schOrgs.length }} 条</span>
      </xblock>
      <table class="layui-table layui-form">
        <thead>
          <tr>
            <th width="20">
              <div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i class="layui-icon">&#xe605;</i></div>
            </th>
            <th width="50">ID</th>
            <th>院系名称</th>
            <th width="220">操作</th>
        </thead>
        <tbody class="x-cate">
          <tr v-for="(schOrg,index) in schOrgs" :cate-id="schOrg.id" :fid="schOrg.parentOrgId" >
            <td>
              <div class="layui-unselect layui-form-checkbox" lay-skin="primary" :data-id="schOrg.id" :data-orgName="schOrg.orgName"><i class="layui-icon">&#xe605;</i></div>
            </td>
            <td>{{ schOrg.id }}</td>
            <td>
	            <template v-for="n in schOrg.level">
	               &nbsp;&nbsp;&nbsp;&nbsp;
                </template>
                <i v-if="schOrg.hasChildren" class="layui-icon x-show" status='true'>&#xe623;</i>
                <template v-if="schOrg.hasChildren || schOrg.level == 0">
	               {{ schOrg.orgName }}
                </template>
                <template v-else>
                   ├{{ schOrg.orgName }}
                </template>
            </td>
            
            <td class="td-manage">
              <button class="layui-btn layui-btn layui-btn-xs"  onclick="open_editOrg(this)" ><i class="layui-icon">&#xe642;</i>编辑</button>              
              <button class="layui-btn-danger layui-btn layui-btn-xs"  onClick="member_del(this)" href="javascript:;" ><i class="layui-icon">&#xe640;</i>删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/vue.min.js"></script>
    <script type="text/javascript" src="/js/jquery.form.js"></script>
    <script>
	    var vm = new Vue({
	        el : '#app',
	        data : {
	            schOrgs : ""
	        },
	        created : function() {
	            // 获取学校院系列表
	            this.listSchOrgWithLevel();
	        },
	        updated:function() {
	        	// 数据加载完后，隐藏一级院系下面的子院系
	        	$("tbody.x-cate tr[fid!='0']").hide();
	        },
	        methods : {
	            listSchOrgWithLevel : function() {
	                var vm = this;
	                $.ajax({
	                    url : "/sys/school/org/listSchOrg",
	                    type : "get",
	                    success : function(result) {
	                    	if (result.state) {
                                vm.schOrgs = result.data;
                            } else {
                            	layui.use(['layer'], function(){
                                    var layer = layui.layer
                                    layer.msg(""+result.msg, {icon: 5});
                                });
                            }
	                    }
	                });
	            }
	            
	        }
	    });
    
		/*用户-删除*/
		function member_del(obj){
			var orgName = $(obj).parents("tr").find("div:first").attr("data-orgName");
			var id = $(obj).parents("tr").find("div:first").attr("data-id");
			var orgId = [];
			orgId.push(id);
		    layer.confirm('确认要删除【'+orgName+'】吗？',function(index){
			  $.ajax({
                  url : "/sys/school/org/delSchOrg",
                  type : "post",
                  data : {
                      orgId: orgId
                  },
                  success : function(result) {
                      if (result.state) {
						  // 发异步删除数据
						  $(obj).parents("tr").remove();
						  layer.msg('删除成功!',{icon:1,time:1000});
                      } else {
                          layer.msg(""+result.msg, {icon: 5});
                      }
                  }
              });
		  });
		}
		function delAll (argument) {
			var orgId = tableCheck.getData();
			if (orgId.length <= 0) {
				return;
			}
			// 获取选中的院系名称
			var obj = $(".layui-form-checked").not('.header');
            var orgName=[];
            obj.each(function(index, el) {
            	orgName.push(obj.eq(index).attr('data-orgName'));
            });
			layer.confirm('确认要删除【'+orgName+'】吗？',function(index){
				$.ajax({
                    url : "/sys/school/org/delSchOrg",
                    type : "post",
                    data : {
                    	orgId: orgId
                    },
                    success : function(result) {
                        if (result.state) {
							//捉到所有被选中的，发异步进行删除
							layer.msg('删除成功', {icon: 1});
							$(".layui-form-checked").not('.header').parents('tr').remove();
							// 移除所有checkbox的勾选状态
							$(".layui-form-checkbox").removeClass('layui-form-checked');
                        } else {
                            layer.msg(""+result.msg, {icon: 5});
                        }
                    }
                });
			});
		}
			
		// 打开添加院系的子页面
		function open_addOrg() {
			layer.open({
				type: 2, // 2:url请求
				title: '添加院系',
				skin: 'layui-layer-rim', // 加上边框
				area: ['420px', '240px'], // 宽高
				content: ["/sys/school/org/toAddOrg","no"] // 打开添加院系的页面(禁用滚动条)
			});
		}
		// 打开编辑院系的子页面
		function open_editOrg(obj) {
			var orgId = $(obj).parents("tr").find("div:first").attr("data-id");
			layer.open({
				type: 2, // 2:url请求
				title: '编辑院系',
				skin: 'layui-layer-rim', // 加上边框
				area: ['420px', '240px'], // 宽高
				content: ["/sys/school/org/toEditOrg?orgId="+orgId,"no"] 
			});
		}
		
		
		// 打开添加子院系的子页面
        function open_addChildOrg(obj) {
            var orgId = $(obj).parents("tr").find("div:first").attr("data-id");
            layer.open({
                type: 2, // 2:url请求
                title: '添加子院系',
                skin: 'layui-layer-rim', // 加上边框
                area: ['420px', '240px'], // 宽高
                content: ["/sys/school/org/toAddOrgChild?orgId="+orgId,"no"]
            });
        }
		// 更新页面数据
		function updateData() {
			vm.listSchOrgWithLevel();
		}
    </script>
  </body>

</html>